import React, { Component, useMemo } from 'react'
import { View } from '@tarojs/components'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { timestampToTime, transformData } from '@/utils'
import { SpNavBar } from '@/components'
import api from '@/api'
import './index.scss'
import UploadUtil from '@/utils/UploadUtil'
import { connect } from 'react-redux'
import FormImageItem from '../../shop/comps/form-image-item'
import {
    Form,
    Input,
    Button,
    Dialog,
    Toast,
} from 'antd-mobile'



@connect(({ user }) => ({
    userInfo: user.userInfo
}),
    (dispatch) => ({ dispatch })
)
export default class List extends Component {
    formRef = React.createRef()

    constructor(props) {
        super(props)
        this.state = {
            head_portrait: [],
            form: {
            },
        }
    }
    async componentWillUnmount() {
        console.log('2222')

    }
    async componentDidMount() {
        console.log(this.props.userInfo)
        this.state.form = this.props.userInfo
        await this.formRef.current?.setFieldsValue(this.props.userInfo)
        this.setState({
            head_portrait: [this.props.userInfo.head_portrait]
        })
    }

    async componentDidShow() {
        console.log('dianwu h5 comonentDidShow...')

    }

    onSubmit = async () => {

        const values = this.formRef.current?.getFieldsValue()

        let params = this.state.form
        params = {
            ...JSON.parse(JSON.stringify(values)),
        }
        params.head_portrait = this.state.head_portrait[0]
        if (params.pwd !== params.repwd) {
            Toast.show('您两次密码输入的不一样')
            return
        }
        // Dialog.alert({
        //     content: <pre>{JSON.stringify(params, null, 2)}</pre>,
        // })
        await api.my.updateInfo(params)

        Taro.navigateBack()
    }
    onFinish = (values) => {
        console.log(values)
        if (values.quantity) {

        }
        this.onSubmit(values)
    }
    onFinishFailed = (values) => {
        // Dialog.alert({
        //     content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        // })
    }

    render() {
        const form = this.state.form
        return (
            <View className='creat-form'>
                <SpNavBar title='账号设置' />
                <Form
                    ref={this.formRef}
                    layout='horizontal'
                    footer={
                        <Button block type='submit' color='primary' size='large' >
                            提交
                        </Button>
                    }
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    initialValues={{}}
                >
                    <Form.Item label='账号' name='login_name'

                    >
                        <Input disabled />
                    </Form.Item>
                    <Form.Item label='昵称' name='username'
                    >
                        <Input placeholder='请输入昵称' />
                    </Form.Item>

                    <Form.Item
                        label='头像'
                    >
                        <FormImageItem
                            label=''
                            key='000'
                            onChange={(item) => {
                                this.setState({
                                    head_portrait: [...item]
                                })
                            }}
                            value={this.state.head_portrait}
                        />
                    </Form.Item>
                    <Form.Item label='修改密码' name='pwd'

                    >
                        <Input type='password' placeholder='输入新密码' />
                    </Form.Item>
                    <Form.Item label='确认密码' name='repwd'
                    >
                        <Input type='password' placeholder='请再输入一次新密码' />
                    </Form.Item>
                </Form>
            </View >

        )
    }
}
